<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="referrer" content="no-referrer"/>
    <link rel="icon" th:href="@{/images/logo.png}" type="image/x-icon"/>
    <title>发布</title>
    <!-- jquery -->
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" th:href="@{/css/editormd.css}"/>
    <style>
        .row {
            margin-top: -40px
        }

        .container-fluid {
            padding-top: 36px;
            margin-top: 37px;
            margin-left: 22px;
            margin-right: 22px;
            padding-bottom: 10px;
            background-color: white;
            margin-bottom: 37px;
            margin-top: 1px;
        }

        body {
            background-color: #F7F6F7;
        }

    </style>
</head>
<body>

<!--导航栏-->
<div th:replace="common/common::navigation"></div>

<!--主体-->
<div class="container-fluid">
    <div class="row">
        <!--        左边-->
        <div class="col-xs-12 col-lg-9 col-md-12">
            <h2><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>发起</h2>
            <hr>

            <form>
                <div class="form-group">
                    <label for="title"><h4>标题</h4></label>
                    <input type="text" class="form-control" name="title" th:value="${param.title}" id="title"
                           placeholder="请输入标题....">
                </div>
                <label><h4>内容</h4></label>
                <div class="form-group" id="test-editor">
                       <textarea style="display:none;" th:value="${content}" id="content">
                           请输入内容....
                       </textarea>
                </div>

                <div class="form-group">
                    <label for="tag"><h4>添加标签(选填)</h4></label>
                    <input type="text" class="form-control" name="tag" th:value="${param.tag}" id="tag"
                           placeholder="请输入标签...." onclick="display()" onblur="noDisplay()">
                </div>

                <div id="display" style="display: none">
                    <span class="label label-info" onclick="setTag('Java')" style="font-size: 14px; margin-right: 2px;">
                        Java
                    </span>
                    <span class="label label-info" onclick="setTag('C++')" style="font-size: 14px; margin-right: 2px;">
                        C++
                    </span>
                    <span class="label label-info" onclick="setTag('Spring Boot')"
                          style="font-size: 14px; margin-right: 2px;">
                        Spring Boot
                    </span>
                    <span class="label label-info" onclick="setTag('Python')"
                          style="font-size: 14px; margin-right: 2px;">
                        Python
                    </span>
                </div>


                <button type="button" class="btn btn-success" style="float: right;margin-top: 10px;" onclick="publish()">发布</button>
            </form>

        </div>
    </div>
</div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script th:src="@{/js/editormd.min.js}"></script>
<script th:src="@{/common/common.js}"></script>
<script type="text/javascript">
    $(function () {
        var editor = editormd("test-editor", {
            width: "100%",
            height: "300",
            path: "../lib/",
            delay: 0,
            watch: false,
            placeholder: "请输入内容....",
            name: "content",
            value: $("#content").val(),
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp"],
            imageUploadURL: "/image/upload",
            markdown: ""
        });
    });
</script>
<script>


    function publish() {
        title = $("#title").val()
        content = $("#content").val()
        tag = $("#tag").val()
        $.post(
            CONTEXT_PATH + "/post/doPublish",
            {
                title: title,
                content: content,
                tag: tag
            },
            function (data) {
                if (data.code === 0) {
                    location.href = CONTEXT_PATH + "/"
                } else {
                    alert(data.msg)
                }
            }
        )
    }

    //点击特定区域 input框不触发失去焦点事件: 给特定区域添加ID, 绑定onmousedown 事件
    document.getElementById('display').onmousedown = function (e) {
        //现代浏览器阻止默认事件
        if (e && e.preventDefault)
            e.preventDefault();
        //IE阻止默认事件
        else
            window.event.returnValue = false;
        return false;
    }

    function display() {
        list = $("#display");
        for (i = 0; i < list.length; ++i) list[i].style.display = "block";
    }

    function noDisplay() {
        list = $("#display");
        for (i = 0; i < list.length; ++i) list[i].style.display = "none";
    }

    function setTag(tag) {
        var tags = $("#tag").val();
        var res = "";

        if (tags.indexOf(tag) != -1) {  //如果存在该标签
            if (tags.indexOf(",") == -1) $("#tag").val(""); //只有一个标签
            else {  //存在多个标签
                list = tags.split(",");
                len = list.length;
                if (list[len - 1] == tag) {
                    for (i = 0; i < len - 1; ++i) {
                        res += list[i];
                        if (i < len - 2) res += ",";
                    }
                } else if (list[0] == tag) {
                    for (i = 1; i < len; ++i) {
                        res += list[i];
                        if (i < len - 1) res += ",";
                    }
                } else {
                    for (i = 0; i < list.length; ++i) {
                        if (list[i] != tag) {
                            res += list[i];
                        } else {
                            if (i != list.length - 1) res += ",";
                        }
                    }
                }
                $("#tag").val(res);
            }
        } else {  //不存在该标签
            if (tags.length != 0) $("#tag").val(tags + "," + tag);
            else $("#tag").val(tag);
        }
    }
</script>

</html>